<template>
  <div class="pxy20">
    <div class="manage-header" style="margin-bottom: 20px">
      <el-button type="primary" @click="addArticle">新增</el-button>
      <el-select
        v-model="listQuery.position"
        style="margin-left: 10px"
        placeholder="请选择"
        @change="SelectChangeEve"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>

      <el-input
        v-model="listQuery.title"
        style="width: 300px; margin-left: 10px"
        placeholder="请输入搜索内容"
      >
        <el-button slot="append" icon="el-icon-search" />
      </el-input>
    </div>

    <ElTable v-loading="load" :data="list" border>
      <ElTableColumn label="序号" type="index" align="center" />
      <ElTableColumn label="板块" prop="position" width="120" />
      <ElTableColumn label="标签" prop="tag" width="170" />
      <ElTableColumn label="标题" prop="title" />
      <ElTableColumn
        label="创建时间"
        prop="articleDate"
        width="200"
      />
      <ElTableColumn label="操作">
        <template slot-scope="{ row }">
          <el-button
            type="primary"
            icon="el-icon-edit"
            @click="editArticle(row)"
          >编辑</el-button>

          <el-popconfirm
            title="确定删除这篇文章吗？"
            @confirm="delArticle(row)"
          >
            <el-button
              slot="reference"
              style="margin-left: 5px"
              type="danger"
              icon="el-icon-delete"
            >删除</el-button>
          </el-popconfirm>
        </template>
      </ElTableColumn>
    </ElTable>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.pageNumber"
      :limit.sync="listQuery.pageSize"
      @pagination="getList"
    />
  </div>
</template>
<script>
import { DEL_ARTICLE, GET_ARTICLE_LIST } from '@/api/article'
import Pagination from '@/components/Pagination'
export default {
  name: 'ArticleManage',
  components: {
    Pagination
  },
  data() {
    return {
      list: [],
      listQuery: {
        pageNumber: 1,
        pageSize: 10,
        position: '常规位',
        title: ''
      },
      total: 0,
      options: [
        {
          value: 'Banner位',
          label: 'Banner位'
        },
        {
          value: '推荐位',
          label: '推荐位'
        },
        {
          value: '常规位',
          label: '常规位'
        }
      ],
      load: false
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 获取文章列表
    getList() {
      this.load = true
      console.log(this.listQuery)
      GET_ARTICLE_LIST(this.listQuery).then((res) => {
        console.log('文章=>>', res['data'])
        this.list = res.data['rows']
        this.total = res.data['total']
        this.load = false
      })
    },
    // 增加文章
    addArticle() {
      this.$router.push({ path: '/article/edit' })
    },
    editArticle(row) {
      this.$router.push({ name: 'articleEDIT', params: row })
    },
    // 删除文章
    delArticle(row) {
      DEL_ARTICLE({ ids: row.id }).then((res) => {
        console.log('删除文章', res)
        this.$message({
          message: res.code == '200' ? '删除成功' : '删除失败',
          type: res.code == '200' ? 'success' : 'error'
        })
        res.code == '200' ? this.getList() : ''
      })
    },
    // 板块选择器
    SelectChangeEve(val) {
      console.log('测试', val)
      this.listQuery.position = val
      this.getList()
    }
  }
}
</script>
<style lang="scss" scoped></style>
